<template>
	<view class="content">
		<view class="backGround" :style="{background: `url(${banner_bg})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround"
					:style="{background: `url(${imgaeUrl('/static/bg.png')})`,opacity: headerOpt }">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
							</view>
							<view class="font-size-32 font-weight-500">
								品牌详情
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="view-box padding-about-24 padding-top-01" style="">
			<view v-for="item,index in goodslist" :key="index"
				@click="navigateTo('/pages/Home/goodsDetails/goodsDetails?id=' + item.product_id)"
				class="view margin-top-20">
				<view class="display-flex">
					<view class="position-relative">
						<view class="" style="width: 220rpx;height: 220rpx;border-radius: 16rpx; overflow: hidden;">
							<image :src="item.thumb_img" style="width: 220rpx;height: 220rpx;" mode=""></image>
							<view v-if="item.subsidy_price>0 && item.stock > 0"
								class="time display-flex space-around align-items position-absolute" style="bottom: 0;">
								爆品补贴
								<text style="color: #FF1348;" class="font-size-20"> | </text>
								<uv-count-down :time="item.end_time" format="DD天HH:mm:ss"></uv-count-down>
							</view>
						</view>
					</view>
					<view class="file-1 display-flex flex-direction-column space-between margin-left-20">
						<view class="font-size-28 font-weight-500 webkit-line-clamp" style="-webkit-line-clamp: 2;">
							{{item.title}}
						</view>
						<view class="">
							<view class="display-flex align-items">
								<view class="margin-top-10" style="color: #FF2E38;">
									<text class="font-size-24 font-weight-bold">￥</text>
									<text class=" font-size-36 font-weight-bold">{{item.sale_price}}</text>
								</view>
								<view v-if="item.subsidy_price>0 && item.stock > 0"
									class="font-size-22 margin-top-10 margin-left-20"
									style="background: #F6F6F6;padding: 3rpx 12rpx; color: #FD6C56;">
									剩余{{item.stock}}单补贴
								</view>
							</view>
							<view v-if="item.subsidy_price>0 && item.stock > 0"
								class="buttons position-relative display-flex space-between margin-top-20">
								<view class=""></view>
								<image :src="imgaeUrl('/static/home/btn.png')" style="width: 214rpx;height: 72rpx;"
									mode=""></image>
								<view class="position-absolute display-flex space-between align-items"
									style="width: 100%;height: 100%;top: 0;">
									<view style="width: 114rpx;height: 72rpx;"
										class="display-flex flex-direction-column  align-items">
										<view class="">
											<view style="color: #FF2E38;">
												<text class="font-size-20 font-weight-500">￥</text>
												<text class=" font-size-28 font-weight-bold">{{item.price}}</text>
											</view>
										</view>
										<view class="font-size-20 " style="color: #FF2E38;margin-top: -6rpx;">
											{{ item.plan_type == 1?'定向高佣':'预估佣金'}}
										</view>
									</view>
									<view class="font-size-36 font-weight-bold" style="color: #FF2E38;">
										+
									</view>
									<view style="width: 184rpx;height: 72rpx;"
										class="color-FFF display-flex flex-direction-column  align-items">
										<view class="">
											<view>
												<text class="font-size-20 font-weight-500">￥</text>
												<text
													class=" font-size-28 font-weight-bold">{{item.subsidy_price}}</text>
											</view>
										</view>
										<view class="font-size-20 " style="margin-top: -6rpx;">
											每单补贴
										</view>
									</view>
								</view>
							</view>
							<view v-else class="display-flex margin-top-15 align-items">
								<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
									class="label center-size-20  color-FFF">
									{{ item.plan_type == 1?'定向高佣':'预估佣金'}}
								</view>
								<view
									style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
									class="label1 center-size-20">
									¥{{item.price}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.reason" class="display-flex align-items margin-top-20">
					<image :src="imgaeUrl('/static/home/dian.png')" style="width: 28rpx;height: 26.79rpx;" mode="">
					</image>
					<view class="font-size-22 file-1 margin-left-20" style="color: #B45F3E;">
						<text class="font-weight-500">推荐理由：</text>
						<text>{{item.reason}}</text>
					</view>
				</view>
			</view>
			<!-- <view v-if="islod" class="margin-top-20 display-flex center align-items">
				<image :src="imgaeUrl('/static/lod.gif')" style="width: 40rpx;height: 40rpx;" mode=""></image>
				<view class="font-size-26 margin-left-10 color-666">
					正在加载...
				</view>
			</view>
			<view v-else class="padding-about-24">
				<uv-divider text="数据加载完毕"></uv-divider>
			</view> -->
			<div class="kong"></div>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶
	const id = ref('')
	const banner_bg = ref('')
	const goodslist = ref({})
	const headerOpt = ref(0)
	const islod = ref(true)
	onLoad(function(option) {
		id.value = option.id
		getBrandInfo()
	});
	onShow(function() {});
	onReady(function() {});
	async function getBrandInfo() {
		let object = {
			id: id.value
		}
		const {
			code,
			data
		} = await api.getBrandInfo(object)
		if (code == 0) {
			banner_bg.value = data.banner_bg
			goodslist.value = data.goods_list
			islod.value = !islod.value
		}
	}
	onReachBottom(function() {});
	onPageScroll(function(e) {
		// scrollTop.value = 
		headerOpt.value = Math.min(1, e.scrollTop / 200);
	})
</script>

<style scoped lang="scss">
	::v-deep .uv-count-down__text {
		color: #FF1348 !important;
		font-size: 22rpx !important;
		font-weight: 500 !important;
	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.time {
		width: 220rpx;
		height: 52rpx;
		background: linear-gradient(180deg, #F9F9F9 0%, #FEE5E7 100%);
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #FF1348;
	}

	.miaos {
		height: 29rpx;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		border-top: 1rpx solid #ECCBBF;
		border-right: 1rpx solid #ECCBBF;
		border-bottom: 1rpx solid #ECCBBF;
		font-weight: 400;
		font-size: 20rpx;
		color: #B45F3E;
	}

	.view {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.view-box {
		z-index: 999;
		margin-top: -40rpx;
		background: #F5F5F5;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	.backGround {
		width: 750rpx;
		height: 438rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
		transition: all 0.5s;
	}
</style>